let { table, $, form, layer, upload } = layui;
// debugger
// console.log("123");
export default class Soons {
    constructor() {
        this.render();
        this.handle();
    }
    render() {
        let template = `
        <style>
        .table1{
            margin: auto;
            width: 400px;
        height: 200px;
        }
    </style>
        <table id="soonsTable" lay-filter="soonsTable"></table>
        <script type="text/html" id="tools">
                <form class="layui-form" lay-filter="searchForm">
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                            <i class="layui-icon">&#xe654;</i>
                        </button>
                    </div>
                    <div class="layui-input-inline type">
                    <select name="type" >
                    <option value="name">电影名</option>
                    <option value="ename">英文名</option>
                    <option value="type">类型</option>
                    <option value="area">区域</option>
                    <option value="score">评分</option>
                    <option value="actor">演员</option>
                    <option value="year">年代</option>
                    <option value="time">时长</option>
                    <option value="upDate">上映时间</option>
                    <option value="area">上映区域</option>
                    <option value="count">票房</option>
                    <option value="intro">剧情简介</option>
                    <option value="images">图片</option>
                    </select>
                    
                  </div>
                 
              </div>
                  <div class="layui-input-inline value">
                      <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
                  </div>
                  <div class="layui-input-inline">
                      <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                          <i class="layui-icon">&#xe615;</i>
                      </button>
                  </div>
                </div>
                </form>
            </script>
        <script type="text/html" id="soonsBar">
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        `
        $("#content").html(template);
    }
    handle() {
        // let headImg = '';
        table.render({
            elem: "#soonsTable",
            url: "/soons", //数据接口
            toolbar: "#tools",
            page: true, //开启分页
            request: {
                pageName: 'current',
                limitName: 'pageSize'
            },
            parseData: function (res) {
                return {
                    "code": 0,
                    "count": res.total,
                    "data": res.rows
                }

            },
            limit: 10,
            limits: [3, 5, 10, 15, 20],
            cols: [
                [
                    //表头
                    {
                        field: "films", title: "电影名", templet: function (d) {// 关联电影
                            return d.films ? d.films.name : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "英文名", templet: function (d) {// 关联电影
                            return d.films ? d.films.ename : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "类型", templet: function (d) {// 关联电影
                            return d.films ? d.films.type : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "区域", templet: function (d) {// 关联电影
                            return d.films ? d.films.area : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "评分", templet: function (d) {// 关联电影
                            return d.films ? d.films.score : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "演员", templet: function (d) {// 关联电影
                            return d.films ? d.films.actor[0] : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "年代", templet: function (d) {// 关联电影
                            return d.films ? d.films.year : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "时长", templet: function (d) {// 关联电影
                            return d.films ? d.films.time : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "上映时间", templet: function (d) {// 关联电影
                            return d.films ? d.films.upDate : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "上映区域", templet: function (d) {// 关联电影
                            return d.films ? d.films.area : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "票房", templet: function (d) {// 关联电影
                            return d.films ? d.films.count : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "剧情简介", templet: function (d) {// 关联电影
                            return d.films ? d.films.intro : '';  // 三目

                        }
                    },
                    {
                        field: "films", title: "图片", templet: function (d) {// 关联电影
                            return d.films ? d.films.images[0] : '';  // 三目

                        }
                    },
                    { fixed: 'right', width: 150, align: 'center', toolbar: '#soonsBar' }
                ],
            ],

        });

        table.on('toolbar(soonsTable)', function (obj) {
            console.log(obj);
            // var checkStatus = table.checkStatus;
            // var checkStatus = checkStatus;
            if (obj.event == "add") {
                layer.open({
                    type: 1,
                    title: '所有电影',
                    area: ["1000px", "500px"],
                    btn: ['添加', '关闭'],
                    yes: function (index) {
                        let checkStatus = table.checkStatus("test");
                        // console.log(form.val('addForm'));
                        console.log(checkStatus.data[0]);                                               
                        $.ajax({
                            type: "post",
                            url: "/soons/",
                            data: {films:table.checkStatus('test').data[0]._id},
                            // headImg,
                            success() {
                                table.reload("soonsTable");
                                layer.close(index);
                            }
                        });
                    },
                    success: function () {
                        // 获取所有的电影信息
                        table.render({
                            id: "test",
                            elem: "#test",
                            url: "/films/",
                            page: true, //开启分页
                            parseData: function (res) {
                              //res 即为原始返回的数据
                              return {
                                code: 0, //解析接口状态
                                count: res.total, //解析数据长度
                                data: res.rows, //解析数据列表
                              };
                            },
                            request: {
                              pageName: "current", //页码的参数名称，默认：page
                              limitName: "pageSize", //每页数据量的参数名，默认：limit
                            },
                            limit: 5,
                            limits: [3, 5, 10, 15, 20],
                            cols: [
                              [
                                //表头
                                { title: "选择", type: "radio", align: "center" },
                                {
                                  title: "序号",
                                  type: "numbers",
                                  align: "center",
                                },
                                {
                                  field: "name",
                                  title: "电影名",
                                  align: "center",
                                },
                                {
                                    field: "ename",
                                    title: "英文名",
                                    align: "center",
                                  },
                                  {
                                    field: "type",
                                    title: "类型",
                                    align: "center",
                                  },
                                  {
                                    field: "area",
                                    title: "区域",
                                    align: "center",
                                  },
                                  {
                                    field: "score",
                                    title: "评分",
                                    align: "center",
                                  },
                                  {
                                    field: "actor",
                                    title: "演员",
                                    align: "center",
                                  },
                                  {
                                    field: "year",
                                    title: "年代",
                                    align: "center",
                                  },
                                  {
                                    field: "time",
                                    title: "时长",
                                    align: "center",
                                  },
                                  {
                                    field: "upDate",
                                    title: "上映时间",
                                    align: "center",
                                  },
                                  {
                                    field: "area",
                                    title: "上映区域",
                                    align: "center",
                                  },
                                  {
                                    field: "count",
                                    title: "票房",
                                    align: "center",
                                  },
                                  {
                                    field: "intro",
                                    title: "剧情简介",
                                    align: "center",
                                  },

                              ],
                            ],
                          });
                        },
                        content: `
                        
                          <table class="layui-table lay-filter="addForm" id="test">
                      
                          </table>
                          `,
                      });
            } else if (obj.event == "search") {
                console.log(form.val("searchForm"));
                $.ajax({
                    type:'get',
                    url:'/films',
                    data:form.val('searchForm'),
                    success(res){
                        let arr = [];
                        let film = '';
                        let data = res.rows.map(item => item._id);
                        arr.push(data);
                        console.log(arr.length);
                        for (let i = 0; i < arr.length; i++) {
                            film = { type: 'films', value: arr[i] };
                        }
                        table.reload('soonsTable', {
                            where: film,
                            page: {
                                curr: 1
                            }
                        })
                    }
                })
            }
        });

        table.on('tool(soonsTable)', function (obj) {
            console.log(obj);
            if (obj.event == 'del') {
                // 删除电影
                layer.confirm('是否删除？', function (index) {
                    $.ajax({
                        type: "delete",
                        url: '/soons/' + obj.data._id,

                        success() {
                            table.reload('soonsTable');
                            layer.close(index);
                        }
                    });

                });
            } 
           
        });

    }
}